<template>
    <div>
        <el-dialog title="选择用户" :visible="true" width="1100px" :modal-append-to-body="false"
            :close-on-click-modal="false" @close="handleClose">
            <div style="height: 600px;overflow: scroll;" @closed="handleUserListClose">
                <el-form :inline="true">
                    <div style="display: flex; justify-content: space-between;">
                        <div>
                            <el-form-item>
                                <el-input v-model="key" clearable placeholder="昵称、手机、邀请码、标签、姓名、昵称"
                                    style="width: 400px;" />
                            </el-form-item>
                            <el-form-item>
                                <label>状态：</label>
                                <el-select v-model="state" placeholder="请选择">
                                    <el-option v-for="item in Object.keys(UserState)" :label="UserState[item]"
                                        :value="Number(item)" />
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="init">查询</el-button>
                            </el-form-item>
                        </div>
                        <div />
                    </div>
                </el-form>
                <!-- 列表数据 -->
                <el-table v-loading="listLoading" :data="tableData" border style="width: 100%">
                    <el-table-column prop="userid" label="ID" width="60" align="center" />
                    <el-table-column prop="phone" label="手机号" align="center" />
                    <el-table-column prop="nickname" label="昵称" align="center" />
                    <el-table-column prop="invcode" label="邀请码" align="center" />
                    <el-table-column prop="truename" label="姓名" align="center" />
                    <el-table-column prop="state" label="状态" align="center">
                        <template slot-scope="{row}">
                            <div v-if='item == row.state' v-for="item in Object.keys(UserState)">{{ UserState[item] }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">

                        <template slot-scope="{row}">
                            <el-button size="mini" type="primary" @click="submit(row)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="block " style="padding-top: 20px;">
                    <el-pagination background :current-page="pageIndex" :page-sizes="[10, 20, 30, 40]"
                        :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"
                        @size-change="idx => { pageSize = idx }" @current-change="idx => { pageIndex = idx }" />
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { userlist } from "@/api/users.js";
import { GetEnum, coinlist } from "@/api/ctrls.js";
export default {
    data() {
        return {
            key: '',
            state: 1,

            // 列表相关
            listLoading: false,
            tableData: [],
            totalCount: 0,
            pageIndex: 1,
            pageSize: 10,

            OrderTypeList: {}, // 订单类型
            UserState: {},
        }
    },
    watch: {
        pageIndex(val) {
            console.log(val);
            this.getData();
        },
        pageSize(val) {
            this.getData()
        }
    },
    mounted() {
        this.getData()
        this.GetEnum();
    },
    methods: {
        /**关闭弹窗 */
        handleClose() {
            this.$parent.modalStatus = 0
        },
        /** 刷新加载 */
        init() {
            this.pageIndex = 1
            this.getData()
        },
        /**获取用户列表 */
        async getData() {
            this.listLoading = true
            const { list, pageIndex, totalCount } = await userlist({
                key: this.key,
                state: this.state,
                PageIndex: this.pageIndex,
                PageSize: this.pageSize
            })
            this.listLoading = false
            if (list) {
                this.totalCount = totalCount
                this.tableData = list
            }
        },
        // 获取枚举
        async GetEnum() {
            const res = await GetEnum();
            this.OrderTypeList = res.data['OrderType'];
            this.UserState = res.data['UserState'];
        },
        /**关闭前（选择用户对话框） */
        handleUserListClose() {
            this.key = '';
        },
        /**（提交） */
        async submit(info) {
            try {
                this.$emit('info', info);
                this.handleClose();
            } catch (e) {
                // 取消
                console.log(e)
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
</style>